<template>
    <div class="logincontainer">
        <div v-if="loadProgress" class="loading">
            <div class="drag-area"></div>
            <div class="loadingImgContent">
                <div class="loadingIcon" :style="{left:loadingIconLeft}">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="35px" viewBox="0 0 30 35" fill="none">
                        <g opacity="1"  transform="translate(0 0)">
                            <mask id="bg-mask-0" fill="white">
                                <use transform="translate(0 0)" xlink:href="#path_0">
                                </use>
                            </mask>
                            <g mask="url(#bg-mask-0)" >
                                <g opacity="1"  transform="translate(0.5 0.5)">
                                    <g opacity="1"  transform="translate(0 0)">
                                        <g opacity="1"  transform="translate(0 0)">
                                            <g id="ic_loading_pin" opacity="1"  transform="translate(0 0)">
                                                <path id="形状结合" fill-rule="evenodd" style="fill:#FFFFFF" opacity="1" d="M14.5 0C18.5041 0 22.1291 1.62297 24.753 4.24695C27.377 6.87094 29 10.4959 29 14.5C29 18.044 27.7286 21.2912 25.6169 23.81C23.4195 26.431 20.3124 28.2638 16.7813 28.8216L14.5001 33.3822L12.2197 28.8218C8.68834 28.2642 5.58105 26.4314 3.38346 23.8104C1.27154 21.2915 0 18.0442 0 14.5C0 10.4959 1.62297 6.87094 4.24695 4.24695C6.87094 1.62297 10.4959 0 14.5 0Z">
                                                </path>
                                                <path id="形状结合" style="fill:#408CDD; opacity:1;" d="M14.5 -0.5M14.5 -0.5Q20.7133 -0.5 25.1066 3.8934Q29.5 8.28683 29.5 14.5Q29.5 19.9566 26.0001 24.1312Q22.3856 28.4425 16.8593 29.3155L16.7813 28.8216L17.2285 29.0453L14.5 34.5L11.7725 29.0454L12.2197 28.8218L12.1417 29.3157L12.2197 28.8218L12.1417 29.3157Q6.61523 28.4431 3.00032 24.1316Q-0.5 19.9568 -0.5 14.5Q-0.5 8.2868 3.8934 3.8934Q8.28681 -0.5 14.5 -0.5L14.5 0.5Q8.70102 0.5 4.6005 4.6005Q0.5 8.70102 0.5 14.5Q0.5 19.5931 3.7666 23.4892Q7.14098 27.5137 12.2977 28.3279L12.5518 28.368L12.2977 28.3279L12.5518 28.368L14.9473 33.1586L14.5001 33.3822L14.0529 33.1585L16.4492 28.3679L16.7033 28.3277Q21.8598 27.5132 25.2337 23.4888Q28.5 19.5928 28.5 14.5Q28.5 8.70105 24.3994 4.6005Q20.2991 0.5 14.5 0.5L14.5 -0.5Z">
                                                </path>
                                                <g opacity="1" transform="translate(3 3)">
                                                    <g class="sdcx_logo_rotate" opacity="1" transform="translate(0 0)">
                                                        <path d="M3.5 26.5L26.5 26.5L26.5 3.5L3.5 3.5L3.5 26.5Z">
                                                        </path>
                                                        <path id="形状" fill-rule="evenodd" style="fill:#408CDD" opacity="1" d="M11.5 0.05C17.8514 0.05 23 5.19855 23 11.55C23 17.9014 17.8514 23.05 11.5 23.05C5.14855 23.05 0 17.9014 0 11.55C0 5.19855 5.14855 0.05 11.5 0.05ZM16.2381 12.7575C16.6152 13.3095 16.8946 13.436 17.3167 13.6269C17.5064 13.7131 17.7422 13.8225 18.0584 14.0007C18.8082 14.4297 18.8082 14.9137 18.8082 15.974L18.8082 16.0949C18.8082 16.5446 18.7646 16.9401 18.6956 17.284C20.4842 15.0389 21.1231 12.0879 20.4226 9.30418C19.7223 6.52044 17.763 4.22296 15.1248 3.0918C14.4888 3.52067 13.6161 4.12917 13.3113 4.54655C13.1561 4.75922 12.9352 5.84834 12.2187 5.93808C12.0324 5.96104 11.7807 5.94496 11.5138 5.92765L11.5126 5.92758C10.7975 5.88166 9.82086 5.81895 9.50814 6.66828C9.30917 7.20648 9.27476 8.66936 9.91766 9.42836C10.0211 9.549 10.0406 9.77332 9.97048 10.0252C9.87845 10.3552 9.6933 10.5565 9.63477 10.5978C9.52433 10.5334 9.30347 10.2771 9.15291 10.1033C8.7929 9.68359 8.34215 9.1604 7.76017 8.99931C7.54869 8.94067 7.31623 8.89245 7.08984 8.84405C6.45835 8.71193 5.74422 8.56126 5.57746 8.20693C5.45671 7.94942 5.45671 7.59579 5.45672 7.22238L5.45672 7.21231C5.45672 6.73275 5.45672 6.19101 5.22224 5.66553C5.14052 5.47794 5.0207 5.30944 4.87033 5.17095C1.84815 8.30762 1.43973 13.1338 3.89189 16.7336C6.34405 20.3334 10.9844 21.7205 15.0099 20.0566C15.1421 19.1941 14.8523 18.366 14.7338 18.0763C14.4693 17.4323 13.5976 16.3317 12.1429 14.8056C11.7542 14.3974 11.7794 14.0835 11.9187 13.1532L11.9336 13.0485C12.0278 12.4113 12.1865 12.0342 14.3313 11.6939C15.4214 11.5213 15.7078 11.956 16.1047 12.5597L16.2381 12.7575Z">
                                                        </path>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                        <defs>
                            <rect id="path_0" x="0" y="0" width="30" height="35" rx="0" ry="0"/>
                        </defs>
                    </svg>
                </div>
                <div class="loadingImg">
                    <el-progress :percentage="cacheProgress"></el-progress>
                </div>
            </div>
            <div :class="{'loading-updateProgress' : showUpdater == true,'loading-cacheProgress' : showUpdater == false}">
                <p>{{showUpdater==true? downloadStatusText : loginStatusText}}</p>
            </div>
            <div v-if="showUpdater" class="loading-updateProgress-detail">
                <p>{{ '当前：' + downloadProcess.transferred + '  /  共：' + downloadProcess.total }}</p>
            </div>
        </div>

        <div class="context" v-if="loadProgress">
            <h1>{{showUpdater==true? (cacheProgress > 99? '下载结束' : '下载中') : '欢迎回来'}}</h1>
        </div>
        <!-- 上升的圆形和矩形 -->
        <div class="area" v-if="loadProgress && isShowCircleRect && showUpdater">
            <ul class="circles">
                <li v-for="index in 20" :key="index"></li>
            </ul>
        </div >
        <!-- 3D飞彩球 -->
        <div class="container" v-if="loadProgress && isShow3DBalls && !showUpdater">
            <div class="bubble-wrap">
                <div v-for="idx in 100" :key="idx" class="bubble"></div>
            </div>
        </div>

        <div class="circle-Top" v-if="!loadProgress"></div>
        <div class="circle-left-content" v-if="!loadProgress">
            <div class="circle-left"></div>
        </div>
        <div v-if="!loadProgress" class="vertical">
             <div class="drag-area"></div>
             <div class="logo">
                 <img :src="logo" class="sidebar-logo" draggable="false" />
             </div>
             <div class="loginForm">
                <v-app>
                 <el-form ref="loginForm" :model="form" :rules="loginRules" class="login-box" v-loading="loading" element-loading-text="登录中">
                    <el-form-item class="formItemLabel"  prop="userName" v-if="cacheLoaded">
<!--                        <el-input type="text" placeholder="工牌编号" v-model="form.userName" name="userName"/>-->
                        <v-text-field name="userName" v-model="form.userName" label="工牌编号" :rules="userNameRules" hide-details="auto" :required="true"></v-text-field>
                    </el-form-item>
                    <el-form-item prop="password" class="formItemLabel password" v-if="cacheLoaded">
<!--                        <el-input ref="password" :type="passwordType" placeholder="请输入密码" v-model="form.password" name="password" show-password />-->
                        <v-text-field name="password" v-model="form.password" label="输入密码" :rules="passWordRules" hide-details="auto" 
                                      :append-icon="show1 ? 'fa fa-eye' : 'fa fa-eye-slash'" :type="show1 ? 'text' : 'password'"  @click:append="show1 = !show1" hint="至少输入六位密码" :required="true"></v-text-field>
                    </el-form-item>
                    <div class="loginSettingClass">
                      <el-checkbox class="loginSetting settingMargin" v-model="rememberAccount" v-if="cacheLoaded" @change="rememberAccountWriteFile">记住工号</el-checkbox>
                      <el-checkbox class="loginSetting settingMargin" v-model="rememberPassword" v-if="cacheLoaded" :disabled="!rememberAccount" @change="rememberAccountWriteFile">
                          记住密码
                      </el-checkbox>
                      <el-checkbox class="loginSetting" v-model="autoLogin" v-if="cacheLoaded"
                                   :disabled="!rememberPassword"
                                   @change="rememberAccountWriteFile">自动登录
                      </el-checkbox>
                    </div>
                    <el-form-item v-if="cacheLoaded" class="loginBtn">
                        <el-button id="loginBtn" class="login-button" @click="getCache()" :loading="loginLoad" round :disabled="loginDisabled">
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
                <div class="currentVersionData">
                    <p>v{{currentAppVersion}}</p>
                </div>
                </v-app>
             </div>
         </div>
        <div v-if="!loadProgress" class="across">
            <ElectronWindowsControlButtonView
                    :currentWindowType="currentWindowTypeVal"
                    :isPinExist="isPinExistVal"
                    :isSettingExist="isSettingExistVal"
                    :isMaximizeExist="isMaximizeExistVal"
                    :isMinimizeExist="isMinimizeExistVal"
                    style="position: absolute; top: 0; right: 0"
                    :maximizable="false"
                    v-if="form.sharedMiscState.isElectronWindowsOrLinux"
            />
            <div class="logoText">
                <div>
                   <img :src=yfx_text_img class="ic_text" draggable="false" />
                </div>
                <div class="addMetting">
                     <el-button id="joinMeeting" class="addMetting-button" type="primary" @click="meetingCall" :loading="addMettingBtnLoad" round disabled title="内置会畅会议系统，试用版暂未开放，如有需要请单独联络">加入会议</el-button >
                </div>
            </div>
        </div>
        <!-- 更新前查看更多版本弹窗 -->
        <el-dialog
          custom-class="editGroupEXtraAction dialogMarginTop"
          :visible.sync="dialogReleaseVisible"
          :modal-append-to-body="false"
          :append-to-body="true"
          :destroy-on-close="true"
          width="65%"
          :show-close="false"
        >
          <div class="releaseInfosContainer">
            <div class="releaseInfosTittle">
                <div class="groupInfoLabel">
                    <span>{{$t('common.releaseHistory')}}</span>
                </div>
                <div class="closeIcon">
                    <img draggable="false" @click="dialogClose" class="closeBtn" src="@/assets/cxtimg/ic_chat_input_delete.png">
                </div>
            </div>
            <div class="releaseInfoContent">
                <el-scrollbar>
                    <el-collapse v-model="activeNames">
                        <el-collapse-item v-for="(release, ridx) in releaseListResult" :key="ridx" :title="'版本：'+release.releaseNo" :name="ridx">
                            <div class="versionChangeDetail" v-for="(change, cidx) in release.releaseChanges" :key="cidx">{{ change }}</div>
                        </el-collapse-item>
                    </el-collapse>
                </el-scrollbar>
            </div>
          </div>
        </el-dialog>
    </div>
</template>

<script>
// import axios from "axios";
import Config from "@/config";
// import wfc from "../../wfc/client/wfc";
import ConnectionStatus from "@/wfc/client/connectionStatus";
import EventType from "@/wfc/client/wfcEvent";
import {clear, getItem, setItem} from "@/ui/util/storageHelper";
import {ipcRenderer, isElectron, currentWindow} from "@/platform";
import ElectronWindowsControlButtonView from "@/ui/common/ElectronWindowsControlButtonView";
import logo1 from "@/assets/cxtimg/sdcx_logo.png";
import {fs} from "@/platform";
import NullUserInfo from "@/wfc/model/nullUserInfo";
import yfx_text from "@/assets/cxtimg/ic_text.png"
// import $ from "jquery";
// var path = require('path');
import {fileObjectTableName, everySizeSaveTableName, openDB, readAllRecord, getRecord, deleteDB} from "@/ui/util/dbHelper";
const homeDir = require('os').homedir();
// const {dialog} = require('@electron/remote');
const appVersion = require('@electron/remote').app.getVersion();

// input框高度调整
// let inputMinHeight = 121;
// let inputParentMinHeight = 200;
// let messageListDivMaxHeight = 416;
let inputMinHeight = 81;
let inputParentMinHeight = 160;
let messageListDivMaxHeight = 456;
// input框高度调整时，以下值不需要变更
let mainwindowDefaultWidth = 1080;
let mainwindowDefaultHeight = 720;

export default {
    name: "App",
    data() {
        const validatePassword = (rule, value, callback) => {
            if (value.length < 6) {
                callback(" ");
            } else {
                callback();
            }
        };

        return {
            form: {
                sharedMiscState: this.$store.state.misc,
                qrCode: "",
                userName: "",
                loginStatus: 0, //0 等待扫码； 1 已经扫码； 2 存在session，等待发送给客户端验证；3 已经发送登录请求 4 调试时，自动登录
                qrCodeTimer: null,
                appToken: "",
                lastAppToken: "",
                enableAutoLogin: false,
                password: "",
            },
            show1:false,
            // 表单验证，需要在 el-form-item 元素中增加 prop 属性
            loginRules: {
                userName: [{required: true, message: " ", trigger: "blur"}],
                password: [
                    {required: true, trigger: "blur", validator: validatePassword},
                ],
            },
            userNameRules: [
                value => !!value || '请输用户名'
            ],
            passWordRules: [
                value => !!value || '请输入密码',    
                value =>  (value && value.length >= 6) || '至少输入六位密码',
            ],
            // 加载动画（未使用）
            loading: false,
            // 翼丰信Logo
            logo: logo1,
            // 翼丰信文字图片
            yfx_text_img: yfx_text,
            // 密码类型
            passwordType: "password",
            //预加载
            cacheLoaded: false,
            //记住用户名
            rememberAccount: false,
            //记住密码
            rememberPassword: false,
            //是否自动登录
            autoLogin: false,
            //可否自动登录（受版本check制约）
            canAutoLogin: false,
            //翼丰信启动文字
            startAppText: !this.$store.state.applicationSetting.isLogOut ? "翼丰信启动中" : "正在注销",
            // //Infra和Imserver是否出现了异常
            // throwException: false,
            loginLoad: false,
            // titleBar按钮控制
            currentWindowType: null,
            currentWindowTypeVal: "login",
            isPinExist: null,
            isPinExistVal: false,
            isSettingExist: null,
            isSettingExistVal: true,
            isMaximizeExist: null,
            isMaximizeExistVal: false,
            isMinimizeExist: null,
            isMinimizeExistVal: true,
            initCache: false,
            isLogined: false,
            cacheProgress: 0,
            loadedCount: 0,
            //最新UI的load画面 UI页面Load直接受这一个指令
            loadProgress:false,
            //点击加入会议按钮，按钮需要loading
            addMettingBtnLoad:false,
            //本地是否存在用户缓存文件
            isHaveUserInfoFile:false,
            //如果存在，取到缓存文件的内容
            UserInfoData:{},
            //加载图标位置
            loadingIconLeft: "0px",
            // 版本更新
            showUpdater: false,
            downloadProcess: null,
            downloadStatusText: "",
            mettingStartTimer:null,
            loginStatusText: "",
            // 上升的圆形和矩形
            isShowCircleRect: true,
            // 3D飞彩球
            isShow3DBalls: true,
            //当前软件版本
            currentAppVersion: appVersion,
            dialogReleaseVisible: false,
            activeNames: [0],
            releaseNotes: null,
            releaseListResult: [],
            releaseInfo: null,
        };
    },
    created() {
        // 仅在Electron模式下(为了让非Electron后能够正常运行，添加的判断)
        if (isElectron()) {
            ipcRenderer.on('autoUpdater-noUpdate-login', (event, info) => {
                // this.$message.info('无可用更新，当前已是最新版');
                this.canAutoLogin = true;
            });
            // 发现新版本
            ipcRenderer.on('autoUpdater-canUpdate-login', (event, info) => {
                if(this.loadProgress){
                    // 如果版本check确认框弹出之前已经点击登录或自动登录，则直接跳过
                    return;
                }
                //如果版本check确认框在自动登录之前执行，则禁止自动登录
                this.canAutoLogin = false;
                // this.$confirm(`发现有新版本【v${info.version}】，是否立即更新？`, '提示', {
                this.releaseInfo = info;
                // const h = this.$createElement;
                var message = `${info.message}，${info.detail}`;
                if(info.latestReleaseInfo && info.latestReleaseInfo.length > 0) {
                    message += `<br/><span style="font-weight: bold;">更新履历：</span>`;
                    info.latestReleaseInfo.forEach((item, index) => {
                        message += `<br/>${parseInt(index)+1}. ${item}`;
                    });
                    message = `${message}<br/><span style="color: blue; cursor: pointer;" onclick="showReleaseInfos()">查看更多...</span>`;
                }
                // this.$confirm(`${info.message}，${info.detail}`, '提示', {
                this.$confirm(message, '提示', {
                    customClass:"confirmCustomClass",
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    // 添加是否强制更新
                    // 是否显示取消按钮
                    showCancelButton: info.forceUpdate=='true' ? false : true,
                    // 是否显示右上角的x
                    showClose: info.forceUpdate=='true' ? false : true,
                    dangerouslyUseHTMLString: true,
                }).then(() => {
                    ipcRenderer.send('autoUpdater-toDownload');
                }).catch(() => {
                    this.$message({
                        customClass: 'updateMsg',
                        type: 'info',
                        message: '已取消下载',
                    });
                    this.canAutoLogin = true;
                });
                // dialog.showMessageBox(info).then((returnValue) => {
                //     if (returnValue.response ===0) {
                //         console.log('开始下载更新');
                //         ipcRenderer.send('autoUpdater-toDownload');
                //     }else{
                //         this.$message({
                //             type: 'info',
                //             message: '已取消更新',
                //         });
                //         console.log('取消下载更新');
                //         return;
                //     }
                // });
            });
            // 下载进度
            ipcRenderer.on('autoUpdater-progress-login', (event, process) => {
                if (process.transferred >= 1024 * 1024) {
                    process.transferred = (process.transferred / 1024 / 1024).toFixed(2) + 'M';
                } else {
                    process.transferred = (process.transferred / 1024).toFixed(2) + 'K';
                }
                if (process.total >= 1024 * 1024) {
                    process.total = (process.total / 1024 / 1024).toFixed(2) + 'M';
                } else {
                    process.total = (process.total / 1024).toFixed(2) + 'K';
                }
                if (process.bytesPerSecond >= 1024 * 1024) {
                    process.speed = (process.bytesPerSecond / 1024 / 1024).toFixed(2) + 'M/s';
                } else if (process.bytesPerSecond >= 1024) {
                    process.speed = (process.bytesPerSecond / 1024).toFixed(2) + 'K/s';
                } else {
                    process.speed = process.bytesPerSecond + 'B/s';
                }
                process.percent = process.percent.toFixed(0);
                this.downloadProcess = process;
                this.cacheProgress = process.percent;
                this.loadProgress = true;
                this.showUpdater = true;
                this.downloadStatusText = process.percent == "100" ? "下载完成(" + process.speed + ")" : "新版本下载中...(" + process.speed + ")";
            });
            // 下载更新失败
            ipcRenderer.on('autoUpdater-error-login', (event) => {
                // this.$message.error('更新失败！');
                this.$message({
                    customClass: 'resultMsg',
                    type: 'error',
                    message: '网络异常，检查更新失败！'
                });
                this.showUpdater = false;
                this.loadProgress = false;
                this.canAutoLogin = true;
            });
            // 下载完成
            ipcRenderer.on('autoUpdater-downloaded-login', (event, info) => {
                // 有时候网速太快会跳过获取进度，下载结束时需要单独设置一下
                // 如果已经启动时或之前已下载未安装，则autoUpdater-progress不会再执行，所以this.downloadProcess始终为null
                if (!!this.downloadProcess && this.downloadProcess != null) {
                    this.downloadProcess.percent = "100";
                    this.cacheProgress = 100;
                    this.downloadStatusText = "下载完成(" + this.downloadProcess.speed + ")";
                }
                this.$confirm(`下载完成，是否退出当前应用并安装新版本？`, '提示', {
                    customClass:"confirmCustomClass",
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    // 添加是否强制更新
                    // 是否显示取消按钮
                    showCancelButton: info.forceUpdate=='true' ? false : true,
                    // 是否显示右上角的x
                    showClose: info.forceUpdate=='true' ? false : true,
                    dangerouslyUseHTMLString: true,
                }).then(() => {
                    ipcRenderer.send('exit-and-update', {isFromLoginPage: true});
                }).catch(() => {
                    this.showUpdater = false;
                    this.loadProgress = false;
                    this.cacheProgress = 0;
                    this.$message({
                        customClass: 'updateMsg',
                        type: 'info',
                        message: '已取消更新',
                    });
                });
                // dialog.showMessageBox(info).then(returnVal => {
                //     if (returnVal.response === 0) {
                //         console.log('开始更新');
                //         setTimeout(() => {
                //             ipcRenderer.send('exit-and-update');
                //         }, 1000);
                //     } else {
                //         this.showUpdater = false;
                //         this.loadProgress = false;
                //         this.$message({
                //             type: 'info',
                //             message: '已取消更新',
                //         });
                //         console.log('取消更新');
                //         return;
                //     }
                // });
            });
        }
    },

    mounted() {
        var _this = this;
        window.showReleaseInfos = function() {
            _this.showReleaseInfos();
        }
    },

    computed: {

    },

    beforeDestroy() {
        if (isElectron()) {
            ipcRenderer.removeAllListeners("autoUpdater-canUpdate-login");
            ipcRenderer.removeAllListeners("autoUpdater-progress-login");
            ipcRenderer.removeAllListeners("autoUpdater-error-login");
            ipcRenderer.removeAllListeners("autoUpdater-downloaded-login");
        }
    },

    methods: {
        showReleaseInfos(){
            console.log("======================================loginpage showReleaseInfos");
            // console.log(this.releaseInfo)
            if(!this.releaseInfo){
                return;
            }
            this.releaseNotes = this.releaseInfo.releaseNotes;
            this.releaseListResult = [];
            var releaseAllList = this.releaseNotes.split(/\r\n#\r\n/);
            releaseAllList.forEach((eachRelease, allIndex) => {
                var eachReleaseInfo = {};
                var releaseNo = '';
                var releaseChanges = [];
                var eachReleaseList = eachRelease.trim().split(/\r\n/);
                eachReleaseList.forEach((item, index) => {
                    if(item.indexOf('Ver:') == 0){
                        // 版本行
                        releaseNo = item.trim().split(':')[1].trim();
                    }else if(item.indexOf('///') == 0){
                        // 注释行，跳过不处理
                    }else{
                        // 版本内变更信息
                        releaseChanges.push(item.trim());
                    }
                });
                if(releaseNo !='' && releaseChanges.length > 0){
                    eachReleaseInfo['releaseNo'] = releaseNo;
                    eachReleaseInfo['releaseChanges'] = releaseChanges;
                    this.releaseListResult.push(eachReleaseInfo);
                }
            });
            console.log(this.releaseListResult);
            this.dialogReleaseVisible = true;
        },
        dialogClose(){
            this.dialogReleaseVisible = false;
        },
        // 过滤掉非input元素的系统contextmenu
        checkcontextmenu(e) {
            if (e.target.nodeName != "INPUT") {
                e.preventDefault();
            }
        },

    },

    watch: {
        cacheProgress(val) {
            this.loadingIconLeft = 300 * (this.cacheProgress/100) - 3 +"px";
            if(val == 100 || val == 99){
                $(".logincontainer .el-progress-bar__inner").addClass("loadProgressStyle");
            }
            // 任务栏显示进度
            currentWindow.setProgressBar(this.cacheProgress/100);
            // 进度条各阶段处理内容显示
            switch(true){
                case this.cacheProgress > 0 && this.cacheProgress <= 5:
                    this.loginStatusText = "登录中...";
                    break;
                case this.cacheProgress > 5 && this.cacheProgress <= 10:
                    this.loginStatusText = "个人信息解析中...";
                    break;
                case this.cacheProgress > 10 && this.cacheProgress <= 15:
                    this.loginStatusText = "组织机构解析中...";
                    break;
                case this.cacheProgress > 15 && this.cacheProgress <= 20:
                    this.loginStatusText = "个人信息校验中...";
                    break;
                case this.cacheProgress > 20 && this.cacheProgress <= 25:
                    this.loginStatusText = "组织机构加载中...";
                    break;
                case this.cacheProgress > 25 && this.cacheProgress <= 30:
                    this.loginStatusText = "组织机构人员信息加载中...";
                    break;
                case this.cacheProgress > 30 && this.cacheProgress <= 99:
                    this.loginStatusText = "组织机构人员头像加载中...";
                    break;
                case this.cacheProgress > 99:
                    this.loginStatusText = "登录成功";
                    break;
                default:
                    this.loginStatusText = "加载中...";
                    break
            }
        },
        canAutoLogin(newVal, oldVal){
            console.log("canAutoLogin newVal | oldVal: " + newVal + " | " + oldVal);
            if(newVal == true && !oldVal){
                if(this.isLogined == false && this.loadProgress == false){
                    // 取消更新后再次check自动登录
                    setTimeout(()=>{
                        if (this.autoLogin && this.canAutoLogin && !this.$store.state.applicationSetting.isLogOut && !this.initCache) {
                            this.getCache();
                        }
                    }, 1000);
                }
            }
        },
    },
    destroyed() {

    },

    components: {
        ElectronWindowsControlButtonView,
    },
};
</script>
<style lang="css" scoped>
.across {
    width: 700px;
    height: 400px;
    margin-top: 50px;
    border: 1px solid #4c68a1;
    background: rgba(1,79,162,0.70);
    box-shadow: 0 5px 30px 0 rgba(0,8,34,0.10);
    border-radius: 20px 10px 20px 20px;
    /*background: url("../../assets/cxtimg/ic_login_bg.png") -30px -26px;*/
}

.vertical {
    width: 380px;
    height: 500px;
    float: left;
    margin-left: 35px;
    /*border-radius: 10px;*/
    border: 1px solid #e5e5e7;
    background: #FAFAFA;
    border-radius: 10px !important;
}

.drag-area {
    position: absolute;
    top: 0;
    left: 0;
    /* 窗口总宽度400-右上角3个按钮宽度46x3 */
    width: 100%;
    height: 50px;
    /* 窗口右上角4个按钮宽度46x3，此处跟其它页面不同，不能设置为35 */
    right: 138px;
    z-index: -1;
    -webkit-app-region: drag;
}

.logincontainer {
    display: block;
}

.loading{
    width: 100%;
    height: 100%;
   background: url("../../assets/cxtimg/ic_login_loading_bg.png") repeat;
    padding-top: 244px;
}
.loadingImg{
    width: 350px;
    margin-left: auto;
    margin-right: auto;
}
.loading-cacheProgress{
    width: 100%;
    text-align: center;
    margin-top: 14px;
}
.loading-cacheProgress p{
    font-family: SourceHanSansSC-Medium;
    font-size: 16px;
    color: #408CDD;
    text-align: center;
    font-weight: 500;
}
.loading-updateProgress{
    width: 100%;
    text-align: center;
    margin-top: 10px;
}
.loading-updateProgress p{
    font-family: SourceHanSansSC-Medium;
    font-size: 13px;
    color: #408CDD;
    text-align: center;
    font-weight: 400;
}
.loading-updateProgress-detail{
    width: 100%;
    text-align: center;
    /* margin-top: 16px; */
}
.loading-updateProgress-detail p{
    font-family: SourceHanSansSC-Medium;
    font-size: 12px;
    color: #408CDD;
    text-align: center;
    font-weight: 400;
}
.logo {
    width: 100%;
    text-align: center;
    margin-top: 55px;
}

.sidebar-logo {
    width: 80px;
}

#window-controls {
    position: absolute !important;
    top: 77px !important;
    right: 75px !important;
}
.loginForm{
    width: 84%;
    margin-left: 8%;
    margin-top: 30px;
}
.el-form-item{
    margin-bottom: 0px;
}
.settingMargin{
    margin-right: 44px;
    margin-bottom: 13px;
}
.loginBtn{
    text-align: center;
}
.loginSettingClass{
    margin-bottom: 3px;
    margin-top: 21px;
}
.login-button{
    width: 160px;
    height: 40px;
    padding: 0;
    background: #408CDD;
    border-radius: 25px;
    margin-top: 26px;
    font-family: SourceHanSansSC-Normal;
    font-size: 18px;
    color:  #FFFFFF;
    letter-spacing: 5px;
    text-align: center;
    font-weight: 400;
}
.login-button:hover{
    color: #408CDD;
    background: #E5F1FF;
    border: 1px solid #408CDD;
}
/*.login-button:active{*/
/*    background: #408CDD;*/
/*    border: 2px solid #E5F1FF;*/
/*}*/
.logoText{
    width: 283px;
    float: right;
    margin-top: 18%;
    text-align: center;
}
.logoText1{
    font-size: 33px;
    color: #ffffff;
}
.logoText2{
    font-size: 14px;
    color: #e7e7e7;
    letter-spacing: 2px;
}
.addMetting{
    margin-top: 60px;
}
.addMetting-button{
    width:160px;
    height: 40px;
    padding: 0px;
    background: rgba(255,255,255,0.10);
    border: 1px solid #ECEFF4;
    border-radius: 25px;

    font-family: SourceHanSansSC-Normal;
    font-size: 17px;
    color: #FAFAFA;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
}
.addMetting-button:hover{
    background: rgba(255,255,255,0.20);
    border: 1px solid #ECEFF4;
}
.addMetting-button:active{
    background: rgba(255,255,255,0.30);
    border: 1px solid #ECEFF4;
}
.password{
    margin-top: 15px;
}
.ic_text{
    width: 110px;
    height: 62px;
}
.circle-Top{
    position: absolute;
    top: 300px;
    right: 35px;
    width: 300px;
    height: 150px;
    background-color: #014FA2;
    opacity: 30%;
    border-radius: 150px 150px 0 0;
    z-index: -1;
}
.circle-left{
    width: 380px;
    height: 380px;
    background-color: #014FA2;
    opacity: 20%;
    border-radius: 190px 190px 190px 190px;
}
.circle-left-content{
    height: 330px;
    overflow: hidden;
    position: absolute;
    top: 120px;
    right: 0px;
    width: 207px;
    border-bottom-right-radius: 20px;
    z-index: -1;
}
.resultMsg{
    background: #ECEFF4 !important;
    border-radius: 5px!important;
}
.loadingImgContent{
    width: 369px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.loadingIcon{
    width: 30px;
    height: 35px;
    position: absolute;
    top: -33px;
    /*transition:left .8s;*/
}

/* 上升的圆形和矩形 */
*{
    margin: 0px;
    padding: 0px;
}

body{
    /* font-family: 'Exo', sans-serif; */
    font-family: SourceHanSansSC-Normal;
}

.context {
    width: 100%;
    position: absolute;
    top:50vh;
    
}

.context h1{
    line-height: 250px;
    text-align: center;
    color: #014FA2;
    font-size: 30px;
    opacity: 0.5;
    animation:shanshuo 2s infinite;
}

@keyframes shanshuo{
    0%{opacity: 0.1}
    25%{opacity: 0.2;}
    50%{opacity: 0.4;}
    75%{opacity: 0.5;}
    100%{opacity: 0.3;}
}

.area{
    /* background: #4e54c8;   */
    /* background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);   */
    width: 100%;
    height:100vh;
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 15s linear infinite;
    bottom: -150px;
    border-radius: 15px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        /* border-radius: 0; */
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        /* border-radius: 50%; */
    }
}
</style>

<style lang="css">
.resultMsg{
    background: #ECEFF4 !important;
    border-radius: 5px!important;
    border: unset !important;
    top: 10px !important;
    left: 225px;
    width: auto !important;
    min-width: auto !important;
    height: 22px !important;
}
.resultMsg .el-message__content{
    font-family: SourceHanSansSC-Normal!important;
    font-size: 14px!important;
    color: #EB4F4F !important;
    letter-spacing: 0!important;
    font-weight: 400!important;
}
.updateMsg{
    background: #ECEFF4 !important;
    border-radius: 5px!important;
    border: unset !important;
    top: 10px !important;
    left: 225px;
    width: auto !important;
    min-width: auto !important;
    height: 22px !important;
}
.updateMsg .el-message__content{
    font-family: SourceHanSansSC-Normal!important;
    font-size: 14px!important;
    letter-spacing: 0!important;
    font-weight: 400!important;
}

.sdcx_logo_rotate path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation-duration: 3s;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-delay: 0ms;
  animation-timing-function: linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

<!-- 3D飞彩球 -->
<style lang="scss" scoped>
html, body {
  height: 100%;
}
body {
//   background: black;
  min-height: 100%;
  overflow: hidden;
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, -500px);
  }
}
.container {
  position: absolute;
  width: 100%;
  min-height: 100%;
  transform-style: preserve-3d;
  top: -80px;
  margin-left: 80px;
}
.bubble-wrap {
  margin: 0 auto;
  width: 700px;
  height: 500px;
  transform-style: preserve-3d;
  transform-origin: center center;
  perspective: 200px;
}
.bubble {
  position: absolute;
//   background: black;
  opacity: .2;
  border-radius: 50%;
  animation: move 5s infinite;
  
}

@for $i from 1 through 100 {
  .bubble:nth-child(#{$i}){
     $size: random(30)+px;
     height: $size;
     width: $size;
     animation-delay: -$i * .5s;
     transform: translate3d( (random(1000) * 1px),  (random(1000) * 1px), (random(2000) * 1px));
     background: hsl( random(360) , 70%, 50%);
  }
}

.currentVersionData {
    text-align: right;
    margin-right: -20px;
    padding-top: 15px;
    font-family: SourceHanSansSC-Normal;
    font-size: 12px;
    color: #909BAA;
}

.releaseInfosContainer{
  width: 100%;
  height: 100%;
  background: rgba(1,79,162,0.70);
  box-shadow: 0 4px 8px 0 rgba(0,8,34,0.10);
  border-radius: 20px 10px 20px 20px;
}
.releaseInfosTittle{
  display: flex;
  height: 35px;
  font-family: SourceHanSansSC-Normal;
  font-size: 18px;
  color: #FAFAFA;
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 30px;
  /* padding-top: 4px; */
  align-items: center;
}
.closeIcon{
  margin-left: auto;
  width: 20px;
  margin-right: 15px;
  margin-top: 2px;
  cursor: pointer;
}
.closeIcon:active{
    opacity: 0.7;
}
.releaseInfoContent{
  background: #FFFFFF;
  height: 320px;
  padding: 15px;
  box-shadow: 0 4px 8px 0 rgba(0,8,34,0.10);
  border-radius: 20px 0 18px 20px;
  padding-top: 1px;
}
.versionChangeDetail{
    font-family: SourceHanSansCN-Normal;
    font-size: 14px;
    color: #909BAA;
    letter-spacing: 0;
    font-weight: 400;
    text-align: left;
}
.releaseInfosContainer ::v-deep .el-collapse{
    border-top: unset;
    border-bottom: unset;
}
</style>